
<!DOCTYPE html>
<!-- (C) 2013-present  SheetJS http://sheetjs.com -->
<!-- vim: set ts=2: -->
<html>
<head>
  <title>SheetJS JS-XLSX In-Browser HTML Table Export Demo</title>
  <style>
    .xport, .btn {
      display: inline;
      text-align:center;
    }
    a { text-decoration: none }

    .button {
      padding: 20px;
      border-radius: 10px;
      background-color:#9b6;
      display: block;
      width: 200px;
    }
  </style>
</head>
<body>
<!-- SheetJS js-xlsx library -->
<script type="text/javascript" src="http://rawgit.com/protobi/js-xlsx/master/shim.js"></script>
<script type="text/javascript" src="http://rawgit.com/protobi/js-xlsx/master/dist/xlsx.full.min.js"></script>

<!-- FileSaver.js is the library of choice for Chrome -->
<script type="text/javascript" src="http://rawgit.com/eligrey/Blob.js/master/Blob.js"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

<!-- FileSaver doesn't work in older IE and newer Safari; Downloadify is the flash fallback -->
<script type="text/javascript" src="http://sheetjs.com/demos/swfobject.js"></script>
<script type="text/javascript" src="http://sheetjs.com/demos/downloadify.min.js"></script>
<script type="text/javascript" src="http://sheetjs.com/demos/base64.min.js"></script>

<script type="text/javascript">
  function export_table_to_excel() {
    var wb = {
      "SheetNames": [
        "Main"
      ],
      "Sheets": {
        "Main": {
          "!merges": [
            {
              "s": {
                "c": 0,
                "r": 0
              },
              "e": {
                "c": 2,
                "r": 1
              }
            }
          ],
          "A1": {
            "v": "This is a submerged cell",
            "s": {
              "border": {
                "left": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "top": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "B1": {
            "v": "Pirate ship",
            "s": {
              "border": {
                "top": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "C1": {
            "v": "Sunken treasure",
            "s": {
              "border": {
                "right": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "top": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "A2": {
            "v": "Blank",
            "t": "s",
            "s":{
              "border": {
                "left": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "top": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }
            }
          },
          "B2": {
            "v": "Red",
            "s": {
              "fill": {
                "fgColor": {
                  "rgb": "FFFF0000"
                }
              },

              "border": {

                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "C2": {
            "v": "Green",
            "s": {
              "fill": {
                "fgColor": {
                  "rgb": "FF00FF00"
                }
              },
              "border": {

                "bottom": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                },
                "right": {
                  "style": "thick",
                  "color": {
                    "auto": 1
                  }
                }
              }

            },
            "t": "s"
          },
          "D2": {
            "v": "Blue",
            "s": {
              "fill": {
                "fgColor": {
                  "rgb": "FF0000FF"
                }
              }
            },
            "t": "s"
          },
          "E2": {
            "v": "Theme 5",
            "s": {
              "fill": {
                "fgColor": {
                  "theme": 5
                }
              }
            },
            "t": "s"
          },
          "F2": {
            "v": "Theme 5 Tint -0.5",
            "s": {
              "fill": {
                "fgColor": {
                  "theme": 5,
                  "tint": -0.5
                }
              }
            },
            "t": "s"
          },
          "A3": {
            "v": "Default",
            "t": "s"
          },
          "B3": {
            "v": "Arial",
            "s": {
              "font": {
                "name": "Arial",
                "sz": 24,
                "color": {
                  "theme": "5"
                }
              }
            },
            "t": "s"
          },
          "C3": {
            "v": "Times New Roman",
            "s": {
              "font": {
                "name": "Times New Roman",
                bold: true,
                underline: true,
                italic: true,
                strike: true,
                outline: true,
                shadow: true,
                vertAlign: "superscript",
                "sz": 16,
                "color": {
                  "rgb": "FF2222FF"
                }
              }
            },
            "t": "s"
          },
          "D3": {
            "v": "Courier New",
            "s": {
              "font": {
                "name": "Courier New",
                "sz": 14
              }
            },
            "t": "s"
          },
          "A4": {
            "v": 0.618033989,
            "t": "n"
          },
          "B4": {
            "v": 0.618033989,
            "t": "n"
          },
          "C4": {
            "v": 0.618033989,
            "t": "n"
          },
          "D4": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.00%"
            }
          },
          "E4": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.00%",
              "fill": {
                "fgColor": {
                  "rgb": "FFFFCC00"
                }
              }
            }
          },
          "A5": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0%"
            }
          },
          "B5": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.0%"
            }
          },
          "C5": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.00%"
            }
          },
          "D5": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.000%"
            }
          },
          "E5": {
            "v": 0.618033989,
            "t": "n",
            "s": {
              "numFmt": "0.0000%"
            }
          },
          "F5": {
            "v": 0,
            "t": "n",
            "s": {
              "numFmt": "0.00%;\\(0.00%\\);\\-;@",
              "fill": {
                "fgColor": {
                  "rgb": "FFFFCC00"
                }
              }
            }
          },
          "A6": {
            "v": "Sat Mar 21 2015 23:47:34 GMT-0400 (EDT)",
            "t": "s"
          },
          "B6": {
            "v": 42084.99137416667,
            "t": "n"
          },
          "C6": {
            "v": 42084.99137416667,
            "s": {
              "numFmt": "d-mmm-yy"
            },
            "t": "n"
          },
          "A7": {
            "v": "left",
            "s": {
              "alignment": {
                "horizontal": "left"
              }
            },
            "t": "s"
          },
          "B7": {
            "v": "center",
            "s": {
              "alignment": {
                "horizontal": "center"
              }
            },
            "t": "s"
          },
          "C7": {
            "v": "right",
            "s": {
              "alignment": {
                "horizontal": "right"
              }
            },
            "t": "s"
          },
          "A8": {
            "v": "vertical",
            "s": {
              "alignment": {
                "vertical": "top"
              }
            },
            "t": "s"
          },
          "B8": {
            "v": "vertical",
            "s": {
              "alignment": {
                "vertical": "center"
              }
            },
            "t": "s"
          },
          "C8": {
            "v": "vertical",
            "s": {
              "alignment": {
                "vertical": "bottom"
              }
            },
            "t": "s"
          },
          "A9": {
            "v": "indent",
            "s": {
              "alignment": {
                "indent": "1"
              }
            },
            "t": "s"
          },
          "B9": {
            "v": "indent",
            "s": {
              "alignment": {
                "indent": "2"
              }
            },
            "t": "s"
          },
          "C9": {
            "v": "indent",
            "s": {
              "alignment": {
                "indent": "3"
              }
            },
            "t": "s"
          },
          "A10": {
            "v": "In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. ",
            "s": {
              "alignment": {
                "wrapText": 1,
                "horizontal": "right",
                "vertical": "center",
                "indent": 1
              }
            },
            "t": "s"
          },
          "A11": {
            "v": 41684.35264774306,
            "s": {
              "numFmt": "m/d/yy"
            },
            "t": "n"
          },
          "B11": {
            "v": 41684.35264774306,
            "s": {
              "numFmt": "d-mmm-yy"
            },
            "t": "n"
          },
          "C11": {
            "v": 41684.35264774306,
            "s": {
              "numFmt": "h:mm:ss AM/PM"
            },
            "t": "n"
          },
          "D11": {
            "v": 42084.99137416667,
            "s": {
              "numFmt": "m/d/yy"
            },
            "t": "n"
          },
          "E11": {
            "v": 42065.02247239584,
            "s": {
              "numFmt": "m/d/yy"
            },
            "t": "n"
          },
          "F11": {
            "v": 42084.99137416667,
            "s": {
              "numFmt": "m/d/yy h:mm:ss AM/PM"
            },
            "t": "n"
          },
          "A12": {
            "v": "Apple",
            "s": {
              "border": {
                "top": {
                  "style": "thin"
                },
                "left": {
                  "style": "thin"
                },
                "right": {
                  "style": "thin"
                },
                "bottom": {
                  "style": "thin"
                }
              }
            },
            "t": "s"
          },
          "C12": {
            "v": "Apple",
            "s": {
              "border": {
                "diagonalUp": 1,
                "diagonalDown": 1,
                "top": {
                  "style": "dashed",
                  "color": {
                    "auto": 1
                  }
                },
                "right": {
                  "style": "medium",
                  "color": {
                    "theme": "5"
                  }
                },
                "bottom": {
                  "style": "hair",
                  "color": {
                    "theme": 5,
                    "tint": "-0.3"
                  }
                },
                "left": {
                  "style": "thin",
                  "color": {
                    "rgb": "FFFFAA00"
                  }
                },
                "diagonal": {
                  "style": "dotted",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "E12": {
            "v": "Pear",
            "s": {
              "border": {
                "diagonalUp": 1,
                "diagonalDown": 1,
                "top": {
                  "style": "dashed",
                  "color": {
                    "auto": 1
                  }
                },
                "right": {
                  "style": "dotted",
                  "color": {
                    "theme": "5"
                  }
                },
                "bottom": {
                  "style": "mediumDashed",
                  "color": {
                    "theme": 5,
                    "tint": "-0.3"
                  }
                },
                "left": {
                  "style": "double",
                  "color": {
                    "rgb": "FFFFAA00"
                  }
                },
                "diagonal": {
                  "style": "hair",
                  "color": {
                    "auto": 1
                  }
                }
              }
            },
            "t": "s"
          },
          "A13": {
            "v": "Up 90",
            "s": {
              "alignment": {
                "textRotation": 90
              }
            },
            "t": "s"
          },
          "B13": {
            "v": "Up 45",
            "s": {
              "alignment": {
                "textRotation": 45
              }
            },
            "t": "s"
          },
          "C13": {
            "v": "Horizontal",
            "s": {
              "alignment": {
                "textRotation": 0
              }
            },
            "t": "s"
          },
          "D13": {
            "v": "Down 45",
            "s": {
              "alignment": {
                "textRotation": 135
              }
            },
            "t": "s"
          },
          "E13": {
            "v": "Down 90",
            "s": {
              "alignment": {
                "textRotation": 180
              }
            },
            "t": "s"
          },
          "F13": {
            "v": "Vertical",
            "s": {
              "alignment": {
                "textRotation": 255
              }
            },
            "t": "s"
          },
          "A14": {
            "v": "Font color test",
            "s": {
              "font": {
                "color": {
                  "rgb": "FFC6EFCE"
                }
              }
            },
            "t": "s"
          },
          "!ref": "A1:F14"
        }
      }
    }

    var wbout = XLSX.write(wb, {bookType:'xlsx', bookSST:true, type: 'binary'});
    var fname =   'test.xlsx';
    try {
      saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), fname);
    } catch(e) { if(typeof console != 'undefined') console.log(e, wbout); }
    return wbout;
  }
  function s2ab(s) {
    if(typeof ArrayBuffer !== 'undefined') {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    } else {
      var buf = new Array(s.length);
      for (var i=0; i!=s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  }
</script>

<button class="button" onclick="export_table_to_excel()">Export</button>
</body>
</html>
